<!-- <link rel=icon href=/favicon.ico> -->

<style>
*{padding:0;margin:0}
html, body,#root{
    height:100%;
    }
#root{
    display:flex;
}
#root .box1{
    margin:15px 7px;
}
.menu{
    width:200px;
    height:100%;
    background-color: #303a4a;
    color:rgb(191, 203, 217);
    font-size:10px;
    transition: all .3s;
}
.main{
    flex:1;
    background-color: #ccc;
}
.main .content{
    transform: translate(0,20px);
    height: 500px;
    width: 900px;
    background-color: #fff;
    border:10px solid rgba(75, 219, 238, 0.082);
    margin:auto;
}

 /* @font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;} */

</style>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./transition.css">
<div id="root">
    <div class="menu" :style="{width:menuWidth+'px'}">
        <div class="box1">
            <h1 @click="who ='index'">{{menuWidth===200?'后台首页':'首页'}}</h1>
        </div>
        <div class="box1">
            <h1 @click="who ='goods'">{{menuWidth===200?'商品分类':'分类'}}</h1>
        </div>
        <div class="box1">
            <h1 @click="who ='orders'">{{menuWidth===200?'商品规格':'规格'}}</h1>
        </div>
    </div>

    <div class="main">
        <div class="top">

            <!-- <template>
                <i data-v-ed610a7c="" class="el-icon-s-fold">&#xe62d;</i>
                <i class="iconfont icon-right">&#xe626;</i>
            </template> -->
            <button @click="changeMenuFn">菜单</button>
            <span>首页&gt;</span>
            <span>后台首页&gt;</span>
            <span>欢迎页</span>
        </div>
        <div class="content">
            <transition
                appear
                mode="out-in"
                name="fade-transform"
            >
                <component :is="who"></component>
            </transition>
        </div>
    </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('index',{template:`<h1>后台首页</h1>`})
Vue.component('goods',{template:`<h1>商品分类</h1>`})
Vue.component('orders',{template:`<h1>商品规格</h1>`})
const vm = new Vue({
    el: "#root",
    data: {
        who:'index',
        menuWidth:200
    },
    methods:{
        changeMenuFn(){
            this.menuWidth=this.menuWidth===200 ? 64 : 200
        }
    }
})
</script>